<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>树</title>
<link href="/css/shangjia-ued.css" rel="stylesheet" type="text/css">
<script src="/js/lib/jquery.js" type="text/javascript"></script>
<script src="/js/plugin/cookie/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
	// demo1
	$("#black").treeview({
		control: "#treecontrol",
		persist: "cookie",
		cookieId: "treeview-black"
	});
	
		//demo2
		initTrees();
		$("#refresh").click(function() {
			$("#black2").empty();
			initTrees();
		});

		
})
	
function initTrees() {
	$("#black2").treeview({
		url: "js/data/source.php"
	})
}

	
	
</script>
</head>
<body>

<table border="0" class="ued_table_1">
  
  <!--list---------------------------->
  <tr>
    <td class="title" colspan="2">树 常用</td>
  </tr>
  <tr>
    <td width="250">
    
<!--tree demo1-->
	<ul id="black" class="treeview">
		<li>Item 1</li>
		<li>
			<span>Item 2</span>
			<ul>
				<li>
					<span>Item 2.1</span>

					<ul>
						<li>Item 2.1.1</li>
						<li>Item 2.1.2</li>
					</ul>
				</li>
				<li>Item 2.2</li>
				<li class="closed">
					<span>Item 2.3 (closed at start)</span>
					<ul>
						<li>Item 2.3.1</li>
						<li>Item 2.3.2</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
<!--/tree demo1-->
    
    </td>
    <td><a href="javascript:void(0);" onClick="$(this).next().toggle()">[代码]</a>
      <div class="ued_box_1">
<textarea class="ued_area_1">
js
// demo1
$("#black").treeview({
    control: "#treecontrol",
    persist: "cookie",
    cookieId: "treeview-black"
});

<!--tree demo1-->
	<ul id="black" class="treeview-black">
		<li>Item 1</li>
		<li>
			<span>Item 2</span>
			<ul>
				<li>
					<span>Item 2.1</span>

					<ul>
						<li>Item 2.1.1</li>
						<li>Item 2.1.2</li>
					</ul>
				</li>
				<li>Item 2.2</li>
				<li class="closed">
					<span>Item 2.3 (closed at start)</span>
					<ul>
						<li>Item 2.3.1</li>
						<li>Item 2.3.2</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
<!--/tree demo1-->
</textarea>
      </div>
      </td>
  </tr>
  <tr>
    <td class="title" colspan="2">树 异步</td>
  </tr>
  <tr>
    <td>
    <h4>Lazy-loading tree-------------------</h4>
    
	<ul id="black2"></ul>
    <!--input id="refresh" value="重新载入" type="button" /-->
    </td>
    <td>
    	<a href="javascript:void(0);" onClick="$(this).next().toggle()">[代码]</a>
      <div class="ued_box_1">
<textarea class="ued_area_1">

<script type="text/javascript">
$(document).ready(function(){
		//demo2
		initTrees();
		$("#refresh").click(function() {
			$("#black2").empty();
			initTrees();
		});
		function initTrees() {
			$("#black2").treeview({
				url: "data/source.php"
			})
		}
})
</script>
<ul id="black"></ul>

</textarea>
</div>
    </td>
  </tr>
    <!--/list----------------------------> 
  
</table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />



</body>
</html>



